<template>
	<view>
		<navbar :title="$t('bank.edittitle')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
			<view class="save" slot="right" @click="save">
				{{$t("bank.save")}}
			</view>
		</navbar>	
		<view class="card">
			<view :class="is_default === type ? 'bank1' : 'bank2'"  >
				<view class="bank-info">
					<view class="name">
						{{code}}
					</view>
					<view class="default" v-show="cardinfo.default == 1" >
						{{$t("bank.default")}}
					</view>
					<view class="set"  v-show="cardinfo.default == 2">
						{{$t("bank.set")}}
					</view>
				</view>
				<view class="card-number">
					{{number}}
				</view>
			</view>
			<view class="card-info">
				<view class="code">
					<view class="code-font">
						{{$t("addbank.code")}}
					</view>
					<view class="select"  @click= "select">
						<template v-if="code">
							{{code}}
						</template>
						<view v-else style="font-size:28rpx;color:#a1777d;">
							{{$t('new.bankcodeph')}}
						</view>
						<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
					</view>	
				</view>
				<view class="code">
					<view class="code-font">
						{{$t("addbank.number")}}
					</view>
					<view class="code-right">
						<u-input v-model="number"  input-align="right"  placeholder-style="text-align:end"  :placeholder="$t('new.cardnumberph')" :clearable="false"/>
						<image v-show="number" style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
						@click="clear('number')"></image>
					</view>
				</view>
				<view class="code">
					<view class="code-font">
						{{$t("addbank.name")}}
					</view>
					<view class="code-right">
						<u-input v-model="name"  input-align="right"  placeholder-style="text-align:end"  :placeholder="$t('new.cardholderph')" :clearable="false"/>
						<image v-show="name" style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
						@click="clear('name')"></image>
					</view>
				</view>
				<view class="code">
					<view class="code-font">
						{{$t("addbank.information")}}
					</view>
					<view class="code-right">
						<u-input v-model="information"  input-align="right"  placeholder-style="text-align:end"  :placeholder="$t('new.contactph')" :clearable="false" />
						<image v-show="information" style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
						@click="clear('information')"></image>
					</view>
				</view>
				<view class="code">
					<view class="code-font">
						{{$t("new.ifsc")}}
					</view>
					<view class="code-right">
						<u-input v-model="ifsc"  input-align="right"  placeholder-style="text-align:end"  :placeholder="$t('new.ifscph')" :clearable="false" />
						<image v-show="ifsc" style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
						@click="clear('ifsc')"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="card-bottom">
			<view :class="is_default === type ? 'set1' : 'set2'" @click="defaul()">
				{{$t("bank.set")}}
			</view>
			<view class="delete" @click="deletes(cardinfo)">
				{{$t("bank.delete")}}
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		setdefault,
		editbankcard,
		getbanklist,
		delbankcard,
		bankcodelist
	}from '@/api/bank.js'
	export default {
		data() {
			return {
				code:'',
				number:'',
				name:'',
				information:'',
				cardinfo: '',
				type:1,
				id: 1,
				ifsc: '',
				is_default : 0,
				show: false,
				values : '',
				list:[
					
				]
			};
		},
		onLoad(options) {
			 let cardinfo = JSON.parse(decodeURIComponent(options.cardinfo));
			this.cardinfo = cardinfo
			console.log(this.cardinfo)
			this.values = cardinfo.bankname
			this.number = cardinfo.bankcard
			this.information = cardinfo.bankphone
			this.name = cardinfo.username
			this.id = cardinfo.id
			this.ifsc = cardinfo.ifsc
			this.is_default = cardinfo.default
			this.load()
		},
		methods: {
			clear(key) {
				
				console.log(this.$data)
				console.log(this.$data[key])
				
				if(this.$data[key]){
					this.$data[key] = ''
					
				}
			},
			async deletes(e){
				this.cardinfo = '',
				await delbankcard({
					id : this.id
				})
				uni.navigateBack({
					delta: 1
				})	
			},
			async save(){
				await editbankcard({
					 username : this.name,
					 bankphone : this.information,
					 bankname : this.values,
					 bankcard : this.number,
					 ifsc : this.ifsc,
					 id : this.id,
					 default : this.is_default,	 
				})
				uni.navigateBack({
					delta:1
				})
			},
			async defaul(){
				 await setdefault({
					id : this.id,
					is_default : 1
				})
				if(this.is_default == 0){
					this.is_default =1;
				}
			},
			select(){
				this.show = true
			},
			async load(){
				let result = await bankcodelist()
				console.log(result)
				this.list = result
				for( let i=0 ;i<this.list.length; i++){
					if(this.list[i].value == this.values){
						this.code = this.list[i].label
					}
				}
			},
			confirm(e){
				console.log(e)
				this.values = e[0].value
				this.code = e[0].label
			}
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6;
	}
	.save{
		font-size: 36rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		margin-left: 548rpx;
	}
	.card{
		background-color: #FFFFFFFF;
	}
	.bank1{
		width: 670rpx;
		height: 220rpx;
		background: linear-gradient(90deg, #CA3A39 0%, #B41719 100%);
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(170,170,170,0.7);
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
	}
	.bank2{
		width: 670rpx;
		height: 220rpx;
		background: linear-gradient(90deg, #50516A 0%, #2D2E4B 100%);
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(170,170,170,0.7);
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
	}
	
	
	.bank-info{
		display: flex;
		justify-content: space-between;
		.name{
			font-size: 34rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
		}
		.default{
			border: 2rpx solid #FFFFFF;
			opacity: 0.5;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.5;
			width: 180rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			margin-top: -11rpx;
		}
		.set{
			width: 250rpx;
			height: 42rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
			margin-top: -11rpx;
		}
	}
	
	.card-number{
		font-size: 50rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 69rpx;
		line-height: 50rpx;
	}
	
	.card-info{
		margin-top: 14rpx;
		.code{
			display: flex;
			justify-content: space-between;
			height: 108rpx;
			line-height: 108rpx;
			border-bottom: 2rpx solid  #ECECEC;
			padding: 0 40rpx;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #2B3039;
			.code-right{
				flex:1;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #2B3039;
				width: 360rpx;
			}
			.select{
				width: 360rpx;
				padding-right: 54rpx;
				text-align: right;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #2B3039;
			}
		}
		
	}
	
	.card-bottom{
		margin: 100rpx 40rpx;
		display: flex;
		justify-content: space-between;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		.set1{
			width: 320rpx;
			height: 90rpx;
			background: #AAAAAA;
			border-radius: 10rpx;
		}
		
		.set2{
			width: 320rpx;
			height: 90rpx;
			background: #17CD0A;
			border-radius: 10rpx;
		}
		.delete{
			width: 320rpx;
			height: 90rpx;
			background: #FC3E32;
			border-radius: 10rpx;
		}
	}
</style>
